<template>
  <div>
    <div @click.stop="trigger"> 
      <slot name="fa"></slot>
    </div>
    <transition name="fade">
    <div v-show='isShowPopper' class="wrap">
      <slot name="child"></slot>
    </div>
    </transition>
  </div>
</template>

<script>
  import './index.css'
  export default {
    data () {
      return {
        isShowPopper: false
      }
    },
    methods: {
      trigger () {
        if (!this.isShowPopper) {
          this.isShowPopper = true
          this.addDocumentClick()
        } else {
          this.isShowPopper = false
          this.removeDocumentClick()
        }
      },
      addDocumentClick () {
        window.addEventListener('click', this.do, false)
      },
      removeDocumentClick () {
        window.removeEventListener('click', this.do, false)
      },
      do () {
        this.isShowPopper = false
      }
    }
  }
</script>